<template>
  <!-- 商品管里下的商品列表中的商品添加页 -->
  <div class="ComAdd">
    <!-- 页面最上面的六大步骤开始 -->
    <el-steps :active="active" align-center class="steps">
      <el-step title="基本信息"> </el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <!-- 页面最上面的六大步骤结尾 -->

    <!-- 页面侧面的五个选项开始 -->
    <el-tabs
      :tab-position="tabPosition"
      stretch
      @tab-click="handleClick"
      class="tabs"
    >
      <!-- 侧面五选项之一的 基本信息 开始 -->
      <el-tab-pane label="基本信息" class="pane">
        <el-radio-group v-model="labelPosition" size="small"></el-radio-group>
        <el-form :label-position="labelPosition" label-width="80px">
          <el-form-item label="商品名称">
            <el-input v-model="Comname"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="Comparet"></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input v-model="Comnumber"></el-input>
          </el-form-item>
          <el-form-item label="商品重量">
            <el-input v-model="Commentbig"></el-input>
          </el-form-item>
        </el-form>

        <div class="block">
          <el-cascader
            v-model="value"
            :options="options"
            :props="{
              expandTrigger: 'hover',
              label: 'cat_name',
              value: 'cat_id',
            }"
            @change="handleChange"
            clearable
          ></el-cascader>
        </div>
      </el-tab-pane>
      <!-- 侧面五选项之一的 基本信息 结束 -->

      <!-- 侧面五选项之一的 商品参数 开始 -->
      <el-tab-pane label="商品参数">
        <template>
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              :label="item"
              v-for="(item, index) in checkList"
              :key="index"
            ></el-checkbox>
          </el-checkbox-group>
        </template>
      </el-tab-pane>
      <!-- 侧面五选项之一的 商品参数 结束 -->

      <!-- 侧面五选项之一的 商品属性 开始 -->
      <el-tab-pane label="商品属性">
        <el-radio-group v-model="labelPosition" size="small"></el-radio-group>
        <el-form :label-position="labelPosition" label-width="80px">
          <el-form-item
            :label="item.attr_name"
            v-for="item in posrt"
            :key="item.attr_id"
          >
            <el-input v-model="item.attr_vals"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 侧面五选项之一的 商品属性 结束 -->

      <!-- 侧面五选项之一的 商品图片 开始 -->
      <el-tab-pane label="商品图片">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-tab-pane>
      <!-- 侧面五选项之一的 商品图片 结束 -->

      <!-- 侧面五选项之一的 商品内容 开始 -->
      <el-tab-pane label="商品内容">
        <textarea
          name=""
          id=""
          cols="160"
          rows="20"
          style="margin-left: 60px"
        ></textarea>
        <el-button type="success" @click="Ass">添加商品</el-button>
      </el-tab-pane>
      <!-- 侧面五选项之一的 商品内容 结束 -->

      
    </el-tabs>
    <!-- 页面侧面的五个选项结束 -->
  </div>
</template>

<script>
// 引入api文件夹下的user文件中的数据请求
import { Add, AddClass, posrt, Ass } from "../../../api/user";
export default {
  name: "ComAdd",
  data() {
    return {
      //商品添加侧边栏的位置，现在的位置为左侧
      tabPosition: "left",
      // 商品添加中顶部的六大步骤，跟测边栏的点击而前进，它的值在下面有介绍
      active: 0,
      // 商品添加中的基本信息和商品属性中的表单输入框的提示文字所在的位置，现在提示文字在输入框的上面
      labelPosition: "top",
      // 商品添加中的基本信息下的第一个名字为商品 名称 的输入框的双向绑定数据
      Comname: "",
      // 商品添加中的基本信息下的第二个名字为商品 价格 的输入框的双向绑定数据
      Comparet: 0,
      // 商品添加中的基本信息下的第一个名字为商品 数量 的输入框的双向绑定数据
      Comnumber: 0,
      // 商品添加中的基本信息下的第一个名字为商品 重量 的输入框的双向绑定数据
      Commentbig: 0,
      // 商品添加中的基本信息下三级列表的数据，这是element-ui中的配置想不可更改
      options: [],
      // 商品添加中的商品参数中的数组，在基本信息中选择三级列表中的一种商品，会在商品参数中显示商品的种类
      checkList: [],
      // 商品添加中的商品属性中的类型规格和乱七八糟的信息，会以标题配合输入框的形式出现
      posrt: [],
      // 商品添加中的商品图片，在点击上传图片之后，上传的图片会以对象的形式自动生成id和临时路径以及图片名和一些其他的东西，存入这个数组中
      fileList: [],
      // 这个是下面handleChange事件中传过来的字符串形式的三个id值
      index: "",
      value:[]
    };
  },
  methods: {
    // 
    handleClick(tab) {
      // 将侧边选的动态列表的信息中的index选出来并转为数值类型，并赋值给data中的active
      this.active = Number(tab.index);
      // 点击侧边栏之后请求添加商品中商品参数，并将data中的value当作参数传过去
      AddClass(this.value).then((res) => {
        // 成功传递参数之后获取的数组使用变量接受一下
        let param = res.data.data;
        // 在使用[]号的方式选出第一个，并选中下面的attr_vals属性，attr_vals属性是一个字符串，所以我们需要以逗号的形式去分割为数组，并传值给data中的checkList
        this.checkList = param[0].attr_vals.split(",");
      });
      // 请求商品添加中的商品属性
      posrt(this.value).then((res) => {
        // 将请求之后的数组赋值给data中的posrt
        this.posrt = res.data.data;
      });
    },
    // 请求添加商品中的基本信息中的三级列表选择商品后的各级的商品的id（最多三个id，父 子 孙）
    handleChange(value) {
      // 将数组形式的三个id转为字符串的形式，并赋值给data中的index
      this.index = value.toString();
      // 将数组中的最后一个id值通过[]的形式选择出来，并赋值给data中的value
        this.value = value[2];
    },
    // 上传图片之后图片右上角的小叉号触发的事件，参数一：为那一张图片，参数二：为还剩下几张
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 商品添加中的商品内容的添加商品按钮
    Ass() {
      // 点击添加商品按钮后的请求的添加接口
      Ass(this.Comname,this.Comparet,this.Comnumber,this.Commentbig,this.index).then(res => {
        // 如果返回的信息中的msg值为创建商品成功，则执行else中的提示语句，如果不等于则走if中的提示语句
        if(res.data.meta.msg != "创建商品成功"){
          // 提示商品创建失败
          this.$message.error('商品添加失败');
        }else{
          // 提示商品创建成功
          this.$message({
            type: "success",
            message: "商品添加成功",
          });
        }
      })
    },
  },
  mounted() {
    // 请求添加商品中的基本信息中的三级列表
    Add().then((res) => {
      // 将三级列表的数据数组赋值给，data中的this.options
      this.options = res.data.data;
    });
  },
};
</script>

<style>
.ComAdd {
  width: 96%;
  height: 90vh;
  margin: 0 auto;
}

.alera {
  margin-top: 20px;
  background: rgb(93, 87, 87) !important;
}

.steps {
  margin-top: 40px !important;
}

.tabs {
  margin-top: 20px !important;
  margin-right: 30px !important;
}

.el-tabs__header {
  height: 200px !important;
}

.pane {
  height: 600px !important;
  margin-left: 20px !important;
}

.el-checkbox {
  padding: 10px 10px;
  border: 1px solid #409eff;
  margin-top: 6px;
}
</style>